I CSS så har man två möjligheter att välja på över vart man ska placera CSS informationen, internt eller externt.
Internt innebär att man placerar CSS inom två style taggar högst upp i huvudet(head-taggarna) på HTML filen, inom de taggarna så fyller man i hur hemsidan ska stylas. Externt innebär att all den information som man skriver inom <style> </style>
på en intern CSS flyttas till ett dokument med filändelsen ".css". Det enda som behövs läggas till är information om teckenkodningen högst upp i CSS dokumentet t ex"@charset "UTF-8";" för UTF-8. När man har skapat ett CSS dokument så behöver man bara länka ihop det med HTML dokumentet genom att skriva in <link href="styles.css" rel="stylesheet">
, i det här exemplet så heter CSS dokumetet "styles.css" och ligger lokalt i samma mapp som HTML filen.
Skillnaderna mellan internt och externt i utförande är små men några få steg mer för att skapa den externa, dock så är den externa lösningen så mycket bättre i princip alla fall. Den interna CSS filen gäller ju endast för den sidan som CSS ligger på, medan en extern kan gälla för hela hemsidan då man endast behöver länka ihop CSS filen med alla dokument som man vill ska använda den, för att få samma effekt med en intern CSS så behöver man kopiera och klistra in på varje HTML sida vilket är ett slöseri med tid.
Sedan om man bestämmer sig för att ändra stilen på sin hemsida så kommer man att behöva gå in i varje enskild HTML fil och klistra in den förändringen medan om man man använder sig av en externt länkad CSS fil så räcker det med att man uppdaterar den och så kommer förändringarna ske på varje sida.
För användaren som besöker ens hemsida så är det omtänksamt om man använder en externt länkad CSS då det räcker med att ladda ned den en gång så att den kan sparas i cachen, då sparas det några kb varje gång användaren klickar sig runt på hemsidan eftersom CSS inte behöver laddas in på nytt såsom den hade gjort om CSS var skapad internt på varje sida av hemsidan.
Arv
Arv i CSS låter element som är inom ett elemnt som blir stilsatt att ärva stilen, t ex om en <p> blir stilsatt så kommer även
<strong> att bli stillsatt enligt <p> stil. Arv gäller även när <body> blir stylad, då följer alla element den stilen som <body> har fått, men ifall en p-tagg har fått en annan stil så är den stilen som kommer att gälla för p-taggen. Arvet gäller så länge det inte existerar en specifik stil för objektet.
Sen finns det många undantag där arv inte gäller, t ex så kommer en länk alltid att vara blå, rubrikers storlek kommer inte påverkas av storleken på paragraf texterna(font-size gäller inte rubriker).
Cascade styr över vilken stil som kommer att gälla för olika element då det kommer att ske stil-konflikter mellan olika element genom t ex arv. Cascade är regler för hur såna situationer ska hanteras.
När det kommer till arvs konflikter så är det den stil som är "närmast" taggen som kommer att gälla, alltså så kommer en specifik stil för en p-tagg att gälla före en allmän stil satt i body-taggen. Det kan vara så att det är flerar olika stilar som ska gälla för en p-tagg genom arv från body-taggen, en specifik stil för p-taggen, så länge inte stilarna ligger i konflikt med varandra så kommer de att kombineras och gälla för p-taggen. Men om det är så att stilarna ligger i konflikt med varandra så kommer cascades regler att gå in och styra över vilken stil som kommer att gälla, förenklat så fungerar reglerna ungefär såhär:
En tagg selektor är värd 1p
En klass selektor är värd 10p
En ID-selektor är värd 100p
En inline-style är värd 1000p
källa: CSS3 The Missing Manual 3rd Edition
Så den stil som har högst poäng är den som kommer att vinna då den är mest specifik och närmast det elementet som ska stylas.
Selektorer (tagg-, attribut-, klass-, id- och barn-selektorer)
Selektorer är det som används för att för att styra över vart en stil ska gälla. Tagg selektorn använder man när man vill göra en stil som ska gälla för endast för taggar, exempelvis såhär för en stil som ska gälla alla <h2> h2{color: #666666; } Alla rubriker av storleken 2 kommer att bli grå färgade.
Attribut-selektorn är perfekt att använda när man vill vara mer specifik, den kan användas tillsammans med både tagg oh klass selektorer. Om man vill välja att bara stilsätta en lösenordsinmatning i ett formulär så kan man med fördel göra det med en attribut selektor. Man börjar med att skriva "input"(taggen) och därefter "[type="password"]" så det kommer att se ut såhär: input[type="password"] (attributet selektorn skrivs inom [] )
eftersom input taggen används på flera olika delar i formuläret så behöver man använda attribut selektorn för att särskilja att det är bara "password" delen som ska stilsättas.
Klass-selektorn är perfekt att använda när man vill göra en stil som ska användas på olika delar i hemsidan som kanske inte är relaterade med varandra. Klass selektorn skappas genom att skriva "." följt av klassnamnet, så om vi har en klass "textStil" så skrivs den .textStil{.... } . För att klass selektorn ska kunna verka så måste det finnas klasser i HTML dokumentet som använder sig av klass namnet, t ex <h2 class="textStil"> .
Id-selektor används på samma sätt som en klass selektor men istället för att ha en "." framför id-namnet så har man en "#" #textStil{.....}. I HTML dokumentet så lägger man in ID precis så som man gör med "class". Fördelen som finns med att använda sig av ID är att javascript kan använda dem också.
Barn-selektorer är användbart t ex om man vill styla en lista med kolumner, där man kanske vill ha en stil där varannan är stilsatt.
Här är de varianter av barn-selektorer som man kan använda:
>
:first-child
:last-child
:nth-child()
:first-of-type
:last-of-type
:nth-of-type()
1. Den första " >" används såhär: div > h2 . Koden säger "styla alla h2 som är barn till div" då väljer man endast de h2 som är direkta barn till div, ser relationen annorlunda ut så blir de inte stylade.
2. li:first-child betyder "alla li som är det första barnet till en tagg ska bli stylade", om li följer efter en ul-tagg så kommer den bli stylad men den kommer inte bli stylad om den följer efter en annan li-tagg.
3. li:last-child som ovanstående fast tvärtom, det sista barnet i en relation blir stylad.
4. tr:nth-child() kan användas på olika sätt genom att specificera det man vill göra inom paranteserna, det finns 2st keywords "odd" och "even", "odd" väljer ett ojämnt nummer i det här fället en rad i en lista medan "even" väljer den jämnt numrererade raden. Förutom keywords så kan man välja i vilket intervall man önskar att styla tabellen samt vart i tabellen det ska börja att gälla, så om det står såhär: tr:nth-child(2n +1) Så betyder "2n" vartannat rad och "1" betyder börja från det första elementet.
5. Fungerar likt ":first-child", om vi har en klass t ex ".text" och vi vill styla bara den första "p" som dyker upp inom ".text" klassen så kan man skriva såhär: .text p:first-child
6. Som ovanstående fast det gäller den sista förekomsten av en typ.
7. Fungerar likt ":nth-child()", här går det att använda keywordsen "odd" och "even" och intervall-angivelserna på samma sätt. Skillnaden är att det här gäller barn som har en specifik tagg.
Enheter (absoluta: in, cm, mm, pt, pc och relativa: em, ex, px, %)
Absoluta mått
in
Står för inch
cm
Står för centimeter
mm
Står för milimeter
pt
Står för point, 1pt= 1/72 inch
pc
Står för "pica", 1pc= 12points
Relativa mått
em
1 em är lika stor som den nuvarande fonten, 2 em är dubbelt så stor som den nuvarande
ex
används för att matcha en fonts x-höjd, vilket är höjden på små bokstäver i fonten, bra att använda när det är ont om utrymme
px
px står för pixels, med px så anger man storleken med pixelmått, utseendet kommer att variera beroende på pixeltättheten på skärmen, men resultatet är i stort sett detsamma
%
Procent
Hur ett CSS dokument är uppbygtt
I ett CSS dokument så börjar man med att deklarera vilken teckenkod som man använder, t ex såhär: "@charset "UTF-8";".
Därefter så är det upp till en själv fylla dokumentet med selektorer och styles för dem. Dokumentet sparas som ".css".